<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片上传</title>
</head>

<body>
  <!-- 文件选择元素 -->
  <input type="file" class="upload">
  <img src="" alt="" class="my-img">

  <script src="./axios.min.js"></script>
  <script>
    /**
     * 目标：图片上传，显示到网页上
     *  1. 获取图片文件
     *  2. 使用 FormData 携带图片文件
     *  3. 提交到服务器，获取图片url网址使用
    */

    // 1.获取input元素
    document.querySelector('.upload').addEventListener('change', function (e) {
      // 怎么获取选中的文件
      const file = e.target.files[0]
      // 可以限制图片上传大小
      if (file.size / 1024 / 1024 > 2) {
        return alert('图片大了')
      }
      const fd = new FormData() // 构建form-data格式的数据 上传文件时需要使用他
      fd.append('img', file)
      // 通过forEach遍历的方式可以获取成员
      // fd.forEach(function(value,key){
      //   console.log(key,value)
      // })
      // 上传到服务器
      axios({
        url: 'http://hmajax.itheima.net/api/uploadimg',
        method: 'post',
        data: fd
      }).then(res => {
        // 获取上传后的图片地址 最后展示到页面
        document.querySelector('.my-img').src = res.data.data.url
        console.log(res)
      }).catch(err => {
        console.log(err, 'err')
      })
    })

  </script>
</body>

</html>